import React, { useState, useEffect } from 'react';
import { Table, Form, Input, Button, Pagination, Modal } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import type { ColumnsType, TableProps } from 'antd/es/table';
import { Resizable } from 'react-resizable';

import './mychartslist4.less';

interface DataType {
  key: React.Key;
  clientsource: string;
  clientnum: number;
}

const defaultColumns: ColumnsType<DataType> = [
  {
    title: '序号',
    width: 80,
    ellipsis: true,
    render: (a, b, c) => {
      return (
        <span style={{ display: 'block', textAlign: 'center' }}>{c + 1}</span>
      );
    },
    defaultSortOrder: 'descend',
    sorter: (a, b) => a.clientnum - b.clientnum,
  },
  {
    title: '领用人员',
    width: 200,
    ellipsis: true,
    dataIndex: 'clientsource',
    defaultSortOrder: 'descend',
    sorter: (a, b) => a.clientnum - b.clientnum,
    render: (record) => {
      return <a href="#">{record}</a>;
    },
  },
  {
    title: '领用客户数',
    width: 200,
    ellipsis: true,
    dataIndex: 'clientnum',
    defaultSortOrder: 'descend',
    sorter: (a, b) => a.clientnum - b.clientnum,
    render: (record) => {
      return <a href="#">{record}</a>;
    },
  },
];
const data = [
  {
    key: 1,
    clientsource: '宋浩然',
    clientnum: 2,
  },
  {
    key: 2,
    clientsource: '钟凯',
    clientnum: 8,
  },
  {
    key: 3,
    clientsource: '张晓',
    clientnum: 1,
  },
  {
    key: 4,
    clientsource: '张研',
    clientnum: 12,
  },
];

const onChange: TableProps<DataType>['onChange'] = (
  pagination,
  filters,
  sorter,
  extra,
) => {
  console.log('params', pagination, filters, sorter, extra);
};

const Chartlist: React.FC = () => {
  const onFinish = (values: any) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const [chkrowkey, setchkrowkey] = useState('');
  const onSelectRow = (revoid: any, e: any) => {
    selectedRowKeys.indexOf(revoid.key) === -1
      ? setSelectedRowKeys([...selectedRowKeys, revoid.key])
      : setSelectedRowKeys(
          selectedRowKeys.filter((item) => item !== revoid.key),
        );
    // e.target.parentNode.style.backgroundColor = "red"
    setchkrowkey(revoid.key);
  };
  const onmousehover = (e: any) => {
    let tr = e.target.parentNode; //拿到tr标签
    if (tr.nodeName !== 'TR') {
      tr = tr.parentNode;
    }
    //给所有tr标签设置颜色
    for (let i = 0; i < tr.parentNode.childNodes.length; i++) {
      tr.parentNode.childNodes[i].style.color = '#e17009';
    }
    //单独设置被选中的标签颜色
    tr.style.color = '#e17009';
  };
  const onmouseleave = (e: any) => {
    let tr = e.target.parentNode; //拿到tr标签
    if (tr.nodeName !== 'TR') {
      tr = tr.parentNode;
    }
    //给所有tr标签设置颜色
    for (let i = 0; i < tr.parentNode.childNodes.length; i++) {
      tr.parentNode.childNodes[i].style.color = '#000000';
    }
  };
  const getRowClassName = (record: any) => {
    let className = '';
    if (record.key === chkrowkey) {
      className = 'chkrow';
    }
    return className;
  };

  const [dcolumns, setDcolumns] = useState([]);
  const [components, setComponents] = useState({});

  useEffect(() => {
    setDcolumns(defaultColumns);
    setComponents({
      header: {
        cell: ResizeableTitle,
      },
    });
  }, []);

  const ResizeableTitle = (props: any) => {
    // console.log('props', props);
    const { onResize, width = 100, ...restProps } = props;
    if (!width) {
      return <th {...restProps} />;
    }

    return (
      <Resizable width={width} height={0} onResize={onResize}>
        <th {...restProps} />
      </Resizable>
    );
  };
  const handleResize =
    (index) =>
    (e, { size }) => {
      // console.log('size', size);

      const nextColumns = [...columns];
      nextColumns[index] = {
        ...nextColumns[index],
        width: size.width,
      };
      setDcolumns(nextColumns);
    };

  const columns = dcolumns.map((col, index) => ({
    ...col,
    onHeaderCell: (column) => ({
      width: col.width || 80, // 100 没有设置宽度可以在此写死 例如80试下
      onResize: handleResize(index),
    }),
  }));

  const [open, setOpen] = useState(false);
  const [opentitle, setOpentitle] = useState('');
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [modalText, setModalText] = useState('Content of the modal');

  const showModal = (e: string) => {
    setOpentitle(e);
    setOpen(true);
  };

  const handleOk = () => {
    setModalText('The modal will be closed after two seconds');
    setConfirmLoading(true);
    setTimeout(() => {
      setOpen(false);
      setConfirmLoading(false);
    }, 2000);
  };

  const handleCancel = () => {
    console.log('Clicked cancel button');
    setOpen(false);
  };

  return (
    <div className="salesprofit">
      <div className="salesprofittable container">
        <Table
          bordered
          style={{ wordBreak: 'break-all', height: '510px' }}
          columns={columns}
          dataSource={data}
          components={components}
          onChange={onChange}
          rowSelection={rowSelection}
          // rowClassName={getRowClassName}
          size="small"
          tableLayout="fixed"
          scroll={{
            x: 'max-content',
            y: 'calc(100vh - 500px)',
          }}
          pagination={false}
          // pagination={{
          //     showSizeChanger: true,
          //     position: ["bottomLeft"],
          //     defaultPageSize: 50
          // }}
          onRow={(record) => {
            return {
              onClick: (e) => onSelectRow(record, e), // 点击行
              onMouseEnter: (e) => onmousehover(e), // 鼠标移入行
              onMouseLeave: (e) => onmouseleave(e),
            };
          }}
        />
        <div className="salesprofitpagination">
          <Pagination defaultCurrent={6} total={500} />
          <p>
            显示{1}-{20}条数据，共{29}条
          </p>
        </div>
      </div>
    </div>
  );
};
export default Chartlist;
